<template>
  <div class="parent-container">
    <h2>父组件区域</h2>

    <!-- 父组件输入区域 -->
    <div class="input-area">
      <p class="label">发送给子组件：</p>
      <input
          v-model="parentInput"
          placeholder="输入要发送的内容"
          @keyup.enter="sendToChild"
      >
      <button @click="sendToChild">发送</button>
    </div>

    <!-- 显示子组件传来的内容 -->
    <div class="received-box">
      <p class="label">来自子组件的消息：</p>
      <div class="content-box">{{ childMessage }}</div>
    </div>

    <!-- 子组件 -->
    <ChildComponent
        :parent-message="messageToChild"
        @child-message="handleChildMessage"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

// 父组件输入内容
const parentInput = ref('')
// 要发送给子组件的内容
const messageToChild = ref('初始问候')
// 来自子组件的消息
const childMessage = ref('')

// 发送消息给子组件
const sendToChild = () => {
  if (parentInput.value.trim()) {
    messageToChild.value = parentInput.value
    parentInput.value = ''
  }
}

// 接收子组件消息
const handleChildMessage = (msg) => {
  childMessage.value = msg
}
</script>

<style scoped>
.parent-container {
  border: 2px solid #2196F3;
  padding: 20px;
  border-radius: 8px;
  background-color: #f5fbff;
}

.input-area, .received-box {
  margin: 15px 0;
}

.label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #1565C0;
}

.content-box {
  padding: 10px;
  background-color: #E3F2FD;
  border-radius: 4px;
  min-height: 20px;
}

input {
  padding: 8px;
  width: 70%;
  border: 1px solid #64B5F6;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  padding: 8px 15px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #1976D2;
}
</style>